<template>
  <div class="page">
    <!-- 图片预览 -->
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog> -->
    <div class="page-title flex-between">
      <span>查看订单详情</span>
      <!-- <button @click="$router.push('/order-list')">返回</button> -->
    </div>

    <div class="page-ctx">
      <!-- <div class="step-box">
        <div class="step-item active">
          <div class="step-number">
            <div class="step-line step-line-1"></div>
            <div class="step-num">1</div>
            <div class="step-line step-line-2"></div>
          </div>
          <div class="step-title">商品下单</div>
          <div class="step-date">{{ info.createdTime }}</div>
        </div>
        <div class="step-item" :class="{ active: info.orderStatus >= 3 }">
          <div class="step-number">
            <div class="step-line step-line-3"></div>
            <div class="step-num">2</div>
            <div class="step-line step-line-4"></div>
          </div>
          <div class="step-title">商品发货</div>
          <div class="step-date" style="visibility: hidden">-</div>
        </div>
        <div class="step-item" :class="{ active: info.orderStatus >= 5 }">
          <div class="step-number">
            <div class="step-line step-line-5"></div>
            <div class="step-num">3</div>
            <div class="step-line step-line-6"></div>
          </div>
          <div class="step-title">商品收货</div>
          <div class="step-date" style="visibility: hidden">-</div>
        </div>
      </div> -->

      <div class="base-ctx">
        <div class="base-title">订单信息</div>
        <div class="base-items" style="align-items: flex-start;">
          <div class="base-item">
            <div class="info-title">收货人信息</div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">收货人：</div>
                <div class="val">
                  {{
                    info.consignee 
                  }}
                </div>
              </div>
              <div class="info-item">
                <div class="label">手机号码：</div>
                <div class="val">{{ info.mobile }}</div>
              </div>
              <div class="info-item">
                <div class="label">详细地址：</div>
                <div class="val">{{ info.address }}</div>
              </div>
            </div>
          </div>

          <div class="base-item">
            <div class="info-title">支付及支付方式</div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">支付方式：</div>
                <div class="val">
                  <span >{{payTypeMap[info.payType]}}</span>
                </div>
              </div>
              <div class="info-item">
                <div class="label">下单时间：</div>
                <div class="val">{{ info.createTime }}</div>
              </div>
              <div class="info-item">
                <div class="label">配送方式：</div>
                <div class="val">{{ info.createdTime }}</div>
              </div>
              <div class="info-item">
                <div class="label">订单备注：</div>
                <div class="val">{{ info.remark }}</div>
              </div>
            </div>
          </div>

          <div class="base-item" v-if="invioceJson && invioceJson.title">
            <div class="info-title">发票信息</div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">发票抬头:</div>
                <div class="val">{{ invioceJson.title }}</div>
              </div>
              <div class="info-item">
                <div class="label">纳税人识别号:</div>
                <div class="val">{{ invioceJson.shibiema }}</div>
              </div>
              <div class="info-item">
                <div class="label">注册地址:</div>
                <div class="val">{{ invioceJson.companyAddress }}</div>
              </div>
              <div class="info-item">
                <div class="label">注册电话:</div>
                <div class="val">{{ invioceJson.companyPhone }}</div>
              </div>
              <div class="info-item">
                <div class="label">开户银行:</div>
                <div class="val">{{ invioceJson.bankName }}</div>
              </div>
              <div class="info-item">
                <div class="label">银行账户:</div>
                <div class="val">{{ invioceJson.bankNo }}</div>
              </div>
            </div>
          </div>

          <!-- 物流信息 -->
          <div class="item" v-if="fahuo_info.company">
            <div class="info-title">物流信息</div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">快递公司：</div>
                <div class="val">{{ fahuo_info.company }}</div>
              </div>
              <div class="info-item">
                <div class="label">快递单号：</div>
                <div class="val">{{ fahuo_info.order_id }}</div>
              </div>
            </div>
          </div>

          <!-- 物流信息 -->
          <div class="item" v-if="orderObj.remark">
            <div class="info-title">订单备注</div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">备注：</div>
                <div class="val">{{ orderObj.remark }}</div>
              </div>
            </div>
          </div>

          <div class="item" v-if="peisong_type_text == '上门自提'">
            <div class="info-title">取货人信息</div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">取货人：</div>
                <div class="val">{{ shouhuoInfo.name }}</div>
              </div>
              <div class="info-item">
                <div class="label">手机号码：</div>
                <div class="val">{{ shouhuoInfo.phone }}</div>
              </div>
            </div>
          </div>

          <div class="item" v-if="peisong_type_text == '上门自提'">
            <div class="info-title">厂家信息</div>
            <div class="info-content">
              <div class="info-item">
                <div class="label">联系方式：</div>
                <div class="val">{{ shequ.phone }}</div>
              </div>
              <div class="info-item">
                <div class="label">厂家地址：</div>
                <div class="val">{{ shequ.address }}</div>
              </div>
            </div>
          </div>

          <!-- 转款凭证 -->
          <div class="item" v-if="is_xianxia">
            <div class="info-title">转账凭证</div>
            <div class="info-content">
              <div class="wuliu-name">
                <!-- <span>转账凭证：</span> -->
                <div class="pingzheng-box">
                  <div
                    class="pingzheng-item"
                    v-for="(item, index) in xianxia_imgs"
                    :key="index"
                  >
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="item"
                      :preview-src-list="xianxia_imgs"
                    >
                    </el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="base-ctx"  v-if="info.orderStatus == '2'">
        <div class="base-title">
          <div >配送信息</div>
          <div style="display:flex">
            <div class="blue-text" @click="doPeiSong">查看发货明细</div>
            <div  class="blue-text" @click="doReport">查看检验报告</div>
          </div>
        </div>
        
        <div class="base-items">
          <div class="base-item">
            <div class="info-content">
              <div class="info-item">
                <div class="label">配送物流：</div>
                <div class="val">
                 舒服
                </div>
              </div>
              <div class="info-item">
                <div class="label">物流电话：</div>
                <div class="val">1233444</div>
              </div>
              <div class="info-item">
                <div class="label">发货时间：</div>
                <div class="val">2025-01-10</div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 订单商品信息 -->
      <div class="order-product order-info">
        <div class="order-list-wrap">
          <!-- 商品信息 -->
          <div class="info-item">
            <div class="info-title">
              <div class="date">{{ info.createTime }}</div>
              <div class="order-code">
                订单号：
                <span>{{ info.orderCode }}</span>
              </div>
              <div class="order-state">{{ info.statusInfo }}</div>
            </div>
            <div class="info-good">
              <div class="list-good">
                <div
                  class="item"
                  v-for="(product_item, index) in info.orderGoodsList"
                  :key="index"
                >
                  <div class="item-good flex">
                    <div
                      class="box-image cover"
                      @click="mix_to_product(product_item)"
                    >
                      <!-- <img :src="item.image" alt /> -->
                      <el-image :src="product_item.imgUrl">
                        <div slot="error" class="image-slot">
                          <img :src="product_item.imgUrl" />
                        </div>
                      </el-image>
                    </div>
                    <div class="box-title">
                      <div class="title" @click="mix_to_product(product_item)">
                        {{ product_item.goodsName }}
                      </div>
                      <div class="sku">{{ product_item.keyVals }}</div>
                    </div>
                    <!-- <div class="box-sku">
                      <div class="goods-sku">{{ product_item.keyVals }}</div>
                    </div> -->
                    <div class="box-unit-price">
                      {{ vuex_huobi }} {{ product_item.goodsPrice.toFixed(2) }}
                    </div>
                    <div class="box-num">x {{ product_item.goodsNum }}</div>
                    <div class="box-price">
                      {{ vuex_huobi }}
                      {{ (product_item.goodsPrice * product_item.goodsNum).toFixed(2) }}
                    </div>
                  </div>
                  <div class="goods-action" v-if="info.orderStatus == 5">
                    <!-- <button v-if="item.allow_actions.allow_logistics" class="btn-goods-action" @click="toRoute(`/order-logistics?order_id=${order_id}&logistics_id=${fahuo_id}`)">查看物流</button> -->
                    <button
                      v-if="product_item.ifComment == 0"
                      class="btn-goods-action"
                      @click="to_review(product_item)"
                    >
                      商品评价
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="info-heji">
              <!-- <div class="heji">合计： {{vuex_huobi}} {{ info.price }} 元</div> -->
              <div class="money-box">
                <div class="money-item">
                  <div class="label"></div>
                  <div class="value">
                    共 <b class="count">{{ count_goods }}</b> 件
                  </div>
                </div>
                <div class="money-item">
                  <span class="label">商品总价：</span>
                  <div class="value">
                    <span class="money-num"
                      >{{ vuex_huobi }}{{ info.goodsPrice.toFixed(2) }}</span
                    >
                  </div>
                </div>

                <div class="money-item" >
                  <span class="label">配运费：</span>
                  <div class="value">
                    <span class="money-num"
                      >{{ vuex_huobi }}{{ info.freightPrice }}</span
                    >
                  </div>
                </div>

                <div class="money-item" >
                  <span class="label">【活动名称】优惠：</span>
                  <div class="value">
                    <span class="money-num"> -{{ vuex_huobi }}{{ (+info.discountPrices).toFixed(2) }}</span>
                  </div>
                </div>
                <!-- <div class="money-item" v-if="info.discountPrices != 0">
                  <span class="label">折后价：</span>
                  <div class="value">
                    <span class="money-num"
                      >￥{{ info.actualPrice.toFixed(2) }}</span
                    >
                  </div>
                </div> -->

                <!-- <div class="money-item">
                  <span class="label">满减：</span>
                  <div class="value">
                    <span class="money-num"
                      >{{ vuex_huobi }}{{ payInfo.foreignManjian }}</span
                    >
                  </div>
                </div> -->

                

                <div class="money-item">
                  <span class="label">合计应付：</span>
                  <div class="value">
                    <span class="money-num money-total"
                      >{{ vuex_huobi }}{{ info.actualPrice.toFixed(2) }}</span
                    >
                  </div>
                </div>

                <div class="zhifufangshi-wrap" v-if="is_finish_pay">
                  <span>支付方式：</span>
                  <div class="zhifufangshi">
                    <div class="pay-item" v-if="payInfo.applet > 0">
                      <span class="pay-title">微信支付</span>
                      <span class="pay-money">
                        -{{ vuex_huobi }}{{ payInfo.applet }}</span
                      >
                    </div>
                    <div class="pay-item" v-if="payInfo.balance > 0">
                      <span class="pay-title">余额支付</span>
                      <span class="pay-money">
                        -{{ vuex_huobi }}{{ payInfo.balance }}</span
                      >
                    </div>
                    <div class="pay-item" v-if="payInfo.commission > 0">
                      <span class="pay-title">佣金支付</span>
                      <span class="pay-money">
                        -{{ vuex_huobi }}{{ payInfo.commission }}</span
                      >
                    </div>
                    <div class="pay-item" v-if="is_xianxia">
                      <span class="pay-title">线下支付</span>
                      <span class="pay-money">
                        -{{ vuex_huobi }}{{ payInfo.balance }}</span
                      >
                    </div>
                    <div class="pay-item" v-if="payInfo.jifen">
                      <span class="pay-title">积分抵现</span>
                      <span class="pay-money">
                        -{{ vuex_huobi }}{{ payInfo.jifen }}</span
                      >
                    </div>
                  </div>
                </div>

                <!-- <div class="money-item">
                      <span class="label">优惠券： </span>
                      <span class="money-num">- {{vuex_huobi}}{{ money_coupon }}</span>
                    </div>
                    <div class="money-item">
                      <span class="label">积分抵扣： </span>
                      <span class="money-num">- {{vuex_huobi}}{{ money_jifen_dixian }}</span>
                    </div>
                    <div class="money-item">
                      <span class="label">佣金： </span>
                      <span class="money-num">- {{vuex_huobi}}{{ money_yongjin_dixian }}</span>
                    </div> -->

                <!-- <div class="zhifufangshi-wrap" v-if="isPayed">
                      <span>支付方式：</span>
                      <div class="zhifufangshi">
                        <div class="pay-item" v-for="(pay, index) in shiji_list_pay_info" :key="index">
                          <span class="pay-title">{{ pay.title }} </span>
                          <span class="pay-money">{{vuex_huobi}}{{ pay.money }}</span>
                        </div>
                      </div>
                    </div> -->
              </div>
            </div>
          </div>

          <!-- 订单操作 -->
          <div class="order-action-box">
            <div class="btn-box">
              <button
                v-if="info.orderStatus == 0"
                class="cancel-btn "
                @click="doCancel(info)"
              >
                取消订单
              </button>
              <button
                v-if="info.orderStatus == 0"
                class="btn-ripple fit-text btn-bg"
                @click="doPay(info)"
              >
                去支付
              </button>
              <button
                v-if="info.orderStatus == 2"
                class="btn-ripple fit-text btn-bg"
                @click="doDelete(info)"
              >
                删除订单
              </button>
              <button
                v-if="info.orderStatus == 2"
                class="btn-ripple fit-text btn-bg"
                @click="doReceive(info)"
              >
                确认收货
              </button>
              <button
                v-if="info.orderStatus >= 5"
                class="btn-ripple fit-text btn-bg"
                @click="doRefund(info)"
              >
                售后
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <order_cancel_modal
      ref="order_cancel_modal"
      @confirm="emitConfirm"
      data-type="取消"
    />
    <order_delete_modal
      ref="order_delete_modal"
      @confirm="emitConfirm"
      data-type="删除"
    />
    <order_receive_modal
      ref="order_receive_modal"
      @confirm="emitConfirm"
      data-type="收货"
    />
    <order_refund_modal
      ref="order_refund_modal"
      @confirm="emitConfirm"
      data-type="售后"
    />

    <order_wuliu_modal
      ref="order_wuliu_modal"
      @confirm="emitConfirm"
      data-type="物流信息"
      />

      <order_report_modal 
      ref="order_report_modal"
      @confirm="emitConfirm"
      data-type="检测报告"
      />
  </div>
</template>

<script>
import order_cancel_modal from "@/components/order/order_cancel_modal.vue"; //取消订单
import order_delete_modal from "@/components/order/order_delete_modal.vue"; //删除
import order_receive_modal from "@/components/order/order_receive_modal.vue"; //收货
import order_refund_modal from "@/components/order/order_refund_modal.vue"; //售后
import order_wuliu_modal from "@/components/order/order_wuliu_modal.vue"; //物流信息
import order_report_modal from "@/components/order/order_report_modal.vue";

import { mapState } from "vuex";

export default {
  name: "order-detail",
  components: {
    order_cancel_modal,
    order_delete_modal,
    order_receive_modal,
    order_refund_modal,
    order_wuliu_modal,
    order_report_modal
  },
  data() {
    return {
      payTypeMap: {
        '0':'微信支付',
        '1':'支付宝支付',
        '2': '授信额度',
        '3': '账单周期',
        '4': "余额"
      },
      id: this.$route.query.id,
      order_id: this.$route.query.id,
      info: {},
      payInfo: {},
      invioceJson: {}, //发票信息
      shouhuoInfo: {}, //收货人信息
      fahuoInfo: {}, //发货信息
      total_product_number: 0,
      products: [],
      full_receive_address: "",
      //
      is_finish_pay: false, //
      //
      is_jifen_goods: false,
      //
      order_zhekou_bili: 10, //打几折
      //

      orderObj: {}, //订单信息
      detail: {}, //订单信息

      pay_info: {}, //支付信息
      fahuo_info: {}, //发货信息

      peisong_info: {}, //门店配送信息
      peisong_type_text: "",
      peisong_type: "",

      is_payed: false, //是否已支付
      is_fahuo: false, //是否已发货
      is_mendian_peisong: false, //是否门店配送

      shequ: {},

      xianxia_imgs: [], //线下凭证信息
      is_xianxia: false, //是否线下转款
      pay_type: "", //支付方式
    };
  },
  computed: {
    ...mapState([""]),
    tabList() {
      //scene
      //筛选状态：0-全部 1-待支付 2-待发货 3-待收货 4-待核销 5-已完成 6-待评价 7-已取消
      //orderStatus
      //订单状态 0待付款 1已付款/待发货 2已发货/待收货 3部分退款 4已关闭
      let list = [
        { value: -1, title: "全部订单", number_key: "orderNum" },
        { value: 0, title: "待付款", number_key: "orderNeedPay" },
        { value: 1, title: "待发货", number_key: "orderNeedDelivery" },
        { value: 2, title: "待收货", number_key: "orderNeedShouhuo" },
        // { value: 3, title: "部分退款", number_key: "orderNeedShouhuo" },
        { value: 4, title: "已取消", number_key: "" },
        // { value: 6, title: "待审核",},
      ];
      return list;
    },
  },
  watch: {
    orderObj(data) {
      let { shouhuoInfo, status, pay_info, fahuo_info, peisong_type, shequ } =
        data;

      this.peisong_type = peisong_type;
      this.shequ = shequ;
      this.shouhuoInfo = shouhuoInfo;
      this.pay_info = pay_info;

      //订单状态码(-5待支付 -3售后处理中 -1无效 0待成团 2待发货 3待收货 4已收货)
      if (status != -5 && status != -1 && status != 0) {
        this.is_payed = true;
      }

      //配送方式
      let peisong_map = {
        1: "上门自提",
        2: "社区配送",
        3: "普通快递",
        4: "",
        5: "",
      };

      //社区购配送方式(1自提 2社区配送 3快递)

      this.peisong_type_text = peisong_map[peisong_type] || "";
      //门店配送订单需要显示配送员信息
      if (this.peisong_type_text == "同城配送") {
        this.is_mendian_peisong = true;
        this.peisong_info = fahuo_info;
      }

      //发货信息
      if (fahuo_info && fahuo_info.company) {
        this.fahuo_info = fahuo_info;
        this.is_fahuo = true; //已经发货
      }
    },
  },
  created() {
    this.setView();
    
  },
  mounted() {
  },
  methods: {
    emitConfirm() {
      this.setView();
    },
    setView() {
      this.query_order();
    },

    query_order() {
      this.$httpApi('/api/v1/purchaser/order/info/'+this.id,{},'get').then(res => {
        let { code, data, msg } = res;
        if (code == 200) {
          let count_goods = 0;
          data.orderGoodsList.forEach((product) => {
              count_goods = count_goods + +product.goodsNum;
            });
            data.count_goods = count_goods;

          this.info = data;
          for(let i=0; i<this.tabList.length; i++){
              if(this.tabList[i].value == this.info.orderStatus){
                this.info.statusInfo = this.tabList[i].title;
              }
            }

          // this.payInfo = data.payInfo;
          // this.products = data.products;
          // this.products.forEach((v) => {
          //   this.total_product_number += parseInt(v.num);
          // });

          // this.fahuoInfo = data.fahuoInfo;
          // this.invioceJson = data.invioceJson || {};
          // this.is_finish_pay = parseFloat(data.pricePayed) > 0;

          // //
          // this.shouhuoInfo = data.shouhuoInfo;
          // if (data.shouhuoInfo) {
          //   let { country, province, city, area, address } = data.shouhuoInfo;
          //   this.full_receive_address = [country, province, city, area, address]
          //     .filter((v) => v)
          //     .join(" ");
          // }

          //
          //支付方式

          //凭证图片
          this.orderObj = data;
          this.detail = data;
        }
      }).catch(err => {
        alertErr(err.msg || '网络异常，请稍后重试！')
      })
    },
    to_review(item) {
      this.$router.push({
        path: "/order-review-submit",
        query: {
          orderId: this.order_id,
          inventoryId: item.id,
        },
      });
    },

    doCancel(item) {
      this.$refs.order_cancel_modal.init(item);
    },
    doPay(item) {
      this.$router.push({
        path: "/payment-methods",
        query: {
          id: item.id,
        },
      });
    },
    doDelete(item) {
      this.$refs.order_delete_modal.init(item);
    },
    doReceive(item) {
      this.$refs.order_receive_modal.init(item);
    },
    doRefund(item) {
      this.$refs.order_refund_modal.init(item);
    },
    doPeiSong(item) {
      this.$refs.order_wuliu_modal.init(item);
    },
    doReport(item){
      this.$refs.order_report_modal.init(item);
    },
    emitConfirmDelete() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="less">
.page {
  .page-title {
    padding: 0 32px;
    text-align: left;
    height: 56px;
    line-height: 56px;
    background: #ffffff;
    font-size: 16px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #333333;

    button {
      min-width: 96px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #D5DBE8;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
    }
    .cancel-btn{
  width: 120px;
height: 44px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #D5DBE8;
font-weight: 400;
font-size: 16px;
color: #333333;
line-height: 44px;
text-align: center;
}
  }
}

.page-ctx {
  margin-top: 24px;
  padding: 24px 32px;
  background: #fff;
}

.step-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 55px 0;

  .step-item {
    text-align: center;

    &.active {
      .step-number {
        .step-num {
          background: #009f39;
          color: #fff;
        }

        .step-line {
          background: #009f39;
        }
      }
    }

    .step-number {
      margin: 0 auto;
      display: flex;
      align-items: center;

      .step-line {
        width: 147px;
        height: 2px;
        background: #f5f5f5;

        &.step-line-1 {
          visibility: hidden;
        }

        &.step-line-6 {
          visibility: hidden;
        }
      }

      .step-num {
        width: 44px;
        height: 44px;
        line-height: 44px;
        background: #edf6fd;
        border-radius: 50%;

        font-size: 20px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
      }
    }

    .step-title {
      margin-top: 14px;
      margin-bottom: 10px;
      font-family: OPPOSans, OPPOSans;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
    }

    .step-date {
      font-family: OPPOSans, OPPOSans;
      font-weight: 400;
      font-size: 12px;
      color: #808080;
    }
  }
}



.base-ctx {
  margin-bottom: 24px;
  min-height: 156px;
  background: #ffffff;
  border: 1px solid #f5f5f5;

  .base-title {
    text-align: left;
    padding-left: 24px;
    height: 48px;
    line-height: 48px;
    background: #f9f9f9;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    padding-right: 24px;
    justify-content: space-between;

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;

    color: #333333;
  }
  .blue-text{
    font-weight: bold;
    font-size: 14px;
    color: #157FDF;
    margin-left: 53px;
    cursor: pointer;
  }

  .base-items {
    //   display: flex;
    align-items: center;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 25px;

    .base-item {
      width: 50%;
      margin-bottom: 30px;
      text-align: left;
      padding-right: 40px;

      // flex: 1;
      .info-title {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        color: #333;
        margin-bottom: 10px;
      }

      .info-content {
        min-height: 20px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #666;

        > div {
          margin-bottom: 5px;

          span {
            display: inline-block;
            // min-width: 80px;
          }
        }

        .info-item {
          display: flex;
          margin-bottom: 5px;

          .label {
            margin-right: 10px;
            width: fit-content;
          }

          .val {
            flex: 1;
          }
        }
      }
    }
  }
}

.order-product {
}

.pingzheng-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .pingzheng-item {
    border: 1px solid #eee;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

.order-info {
  .money-yh {
    span {
      color: #04be02;
      font-weight: bold;
    }
  }

  .money-heji {
    span {
      color: #009f39;
      font-weight: bold;
    }
  }

  .zhifufangshi-wrap {
    margin-bottom: 0 !important;
    padding: 10px 0;
    width: 100%;
    border-top: 1px dashed #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .zhifufangshi {
      display: flex;
      align-items: center;

      .pay-item {
        display: flex;
        align-items: center;
        margin-left: 10px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 24px;
        color: #009f39;

        .pay-title {
          margin-right: 5px;
        }

        .pay-money {
        }
      }
    }
  }

  .order-list-wrap {
    .info-item {
      border: 1px solid #f5f5f5;
      margin-bottom: 30px;
    }

    .info-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      padding: 0 24px;
      background: #f9f9f9;
      border-bottom: 1px solid #f5f5f5;

      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #333333;

      .date {
      }

      .order-code {
        flex: 2;
        text-align: left;
        padding-left: 20px;

        span {
        }
      }

      .order-state {
        // min-width: 96px;
        height: 30px;
        line-height: 30px;
        // background: #009F39;
        color: #EF1F1F;
        // color: #fff;
        font-size: 14px;
      }
    }

    .info-good {
      .list-good {
        .item {
          border-bottom: 1px solid #f5f5f5;

          &:last-child {
            border-bottom: none;
          }
        }

        .item-good {
          padding: 20px;
          border-bottom: 1px dashed #f5f5f5;

          &:last-child {
            border: none;
          }

          .box-image {
            width: 48px;
            height: 48px;
            cursor: pointer;
            border: 1px solid #f5f5f5;

            /deep/ img {
              width: 48px;
              height: 48px;
              object-fit: contain;
              object-fit: cover;
            }

            img {
              width: 48px;
              height: 48px;
              object-fit: contain;
              object-fit: cover;
            }
          }

          .box-title {
            flex: 1;
            text-align: left;
            padding-left: 40px;

            .title {
              width: fit-content;
              cursor: pointer;

              &:hover {
                color: #009f39;
              }
            }
            .sku {
              margin-top: 20px;
              color: #777;
            }
          }

          .box-sku {
            text-align: center;
            min-width: 200px;
          }

          .box-unit-price {
            text-align: center;
            min-width: 200px;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
          }

          .box-num {
            text-align: center;
            min-width: 200px;
          }

          .box-price {
            text-align: center;
            min-width: 200px;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
          }
        }

        .goods-action {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 10px;

          button {
          }

          .btn-goods-action {
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 10px;
            min-width: 96px;
            height: 30px;
            background: #009f39;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #ffffff;
            // border-radius: 14px;
            transition: 0.3s;
            border-radius: 4px;

            &:hover {
              opacity: 0.8;
            }

            &.disabled {
              background: #e5e5e5;
            }
          }
        }
      }
    }
  }

  // 商品信息汇总和订单操作

  .info-heji {
    background: #fafafa;
    padding: 24px 40px;
    border-top: 1px solid #f5f5f5;
    //   display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 20px;
    color: #666;

    .money-box {
      text-align: right;

      .count {
        font-weight: bold;
        color: #666666;
      }

      .money-item {
        margin-bottom: 16px;
        display: flex;
        justify-content: flex-end;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }

        .value {
          min-width: 180px;
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }

        .money-num {
          &.money-total {
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 20px;
            color: #ff0000;
          }
        }
      }
    }
  }


  .order-action-box {
    display: flex;
    justify-content: flex-end;

    .btn-box {
      // margin-top: 10px;
      
      .cancel-btn{
          width: 120px;
          height: 44px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #D5DBE8;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          line-height: 44px;
          text-align: center;
      }

      button {
        transition: 0.3s;
        min-width: 120px;
        height: 44px;
        background: #ffffff;
        // border-radius: 50px 50px 50px 50px;
        border: 1px solid #EF1F1F;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 14px;
        color: #009f39;

        & + button {
          margin-left: 20px;
        }

        &.btn-bg {
          background: #EF1F1F;
          color: #fff;
        }

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/shop/order-detail.less"></style>

